﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>WEB打印控件LODOP的样例八:打印网页图片</title>
  <script language="javascript" src="LodopFuncs.js"></script>
</head>

<body>

  <h2><b>
      <font color="#009999">演示打印网页图片：</font>
    </b></h2>
  <p>利用<font color="#0000FF">ADD_PRINT_IMAGE和SET_PRINT_STYLEA</font>函数可以缩放打印图片，用IMG标签打印WEB图片，用全路径打印本地图片。 </p>

  <p>下面是互联网上的一个图片： </p>

  <!-- <img border="0" src="http://47.104.198.191:9080/red.jpg" width=320 height=400 />&nbsp; -->
  <img border="0" src="print-test.jpg" width=320 height=400 />&nbsp;

  <p>1：看到图片了吗（没有联网可能看不到哟）？如果能看到就可以打印出来，</p>

  <p>&nbsp;先<a href="javascript:myPreview1()">打印预览1</a>，感觉满意可<a href="javascript:myPrint1()">直接打印</a>
    ，如不满意可用<a href="javascript:myPrintSetup1()">打印维护</a>调整。</p>

  <p>&nbsp;这种（默认）方式为截取模式，即当设定区域小于实际图时会截掉剩余的。</p>

  <p>下面演示另外两种模式：</p>

  <p>2：(可变形)扩展缩放模式，放大成600px×250px看看<a href="javascript:myPreview2();">打印预览2</a>。</p>

  <p>3：按原图比例（不变形）缩放打印模式，看看<a href="javascript:myPreview3();">打印预览3</a>。</p>

  <script language="javascript" type="text/javascript">
    var LODOP; //声明为全局变量
    // var photoPath = "http://47.104.198.191:9080/red.jpg";
    // var photoPath = "print-test.jpg";
    var photoPath = "abm.png";
    //var photoPath="http://www.hnhere.cn/plug-in/sino/ui/portals/images/hunan/logo.png";
    var leftX = 3, topY = 3, spaceX = 3, spaceY = 10;
    var photoList = [{
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }, {
      id: '123',
      name: '熬吧马',
      idcard: '130303199001270036',
      url: photoPath
    }];

    function drawPhoto(photoList) {
      for (var i = 0; i < photoList.length; i++) {
        var tmpX, tmpY, tmpWidth, tmpHeight;
        tmpWidth = 32;
        tmpHeight = 40;
        tmpY = leftX + i % 4 * (spaceX + tmpWidth);
        tmpX = topY + parseInt(i / 4) * (spaceY + tmpHeight);
        //画一张
        paddingOne(i, tmpX, tmpY, tmpWidth, tmpHeight, photoList)
        if (i === 7) {
          LODOP.NewPage();
        }
      }
    }
    
    function paddingOne(i, x, y, width, heigth, photoList) {
      LODOP.ADD_PRINT_IMAGE(x + 'mm', y + 'mm', width + 'mm', heigth + 'mm', "<img border='0' src='" + photoList[i].url + "'/>");
      LODOP.SET_PRINT_STYLEA(0, "Stretch", 1)
      LODOP.ADD_PRINT_TEXT(x + heigth + 1 + 'mm', y + 'mm', width + 10 + 'mm', 24, photoList[i].name);
      LODOP.ADD_PRINT_TEXT(x + heigth + 5 + 'mm', y + 'mm', width + 10 + 'mm', 24, photoList[i].idcard);
    }

    function CreateImage() {
      LODOP = getLodop();
      LODOP.PRINT_INIT("港澳通行证制证照片");
      LODOP.ADD_PRINT_TEXT('20mm', '152mm', '120mm', 24, "团组号：HM123423534543435");
      LODOP.SET_PRINT_STYLEA(0, "Angle", 270);
      LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
      LODOP.ADD_PRINT_TEXT('20mm', '160mm', '120mm', 24, "港澳通行证制证照片\n");
      LODOP.SET_PRINT_STYLEA(0, "Angle", 270);
      LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
      LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true);
      LODOP.SET_PRINT_PAGESIZE(2, '100mm', '80mm', 'CreateCustomPage'); // 纸张大小
      LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1); //横向时的正向显示
      LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", 1);//打印后自动关闭预览窗口
      var arr = arrTrans(8, photoList)
      for (var index = 0; index < arr.length; index++) {
        drawPhoto(arr[index]);
      }
    };

    function myPreview1() {
      if (!photoList || !photoList.length) return;//空的不要

      CreateImage();
      LODOP.PREVIEW();
    };
    function myPrint1() {
      CreateImage();
      LODOP.PRINT();
    };
    function myPrintSetup1() {
      CreateImage();
      LODOP.PRINT_SETUP();
    };
    function arrTrans(num, arr) { // 一维数组转换为二维数组
      var iconsArr = []; // 声明数组
      
      for (var index = 0; index < arr.length; index++) {
        var page = Math.floor(index / num); // 计算该元素为第几个素组内
        if (!iconsArr[page]) { // 判断是否存在
          iconsArr[page] = [];
        }
        iconsArr[page].push(arr[index]);
      }
      return iconsArr;
    }	
  </script>

</body>

</html>